<template>
    <div>
        <h2>当前求和为: {{$store.state.sum}}</h2>
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>

        <button @click="inc">+</button>
        <button @click="dec">-</button>
        <button @click="incOdd">当前求和为奇数再加</button>
        <button @click="incWait">等一等再加</button>

    </div>
</template>

<script>
export default {
    name:'StoreTest',
    data() {
        return {
            n: 0
        }
    },
    methods: {
        inc() {
            console.log(this);
            // this.$axios.get('http://localhost:8888/test/getOk')
            // .then(resp => {
            //     console.log('结果', resp.data);
            // })
            // .catch(err => {
            //     console.error('失败', err)
            // })
            this.$https({
                method: "get",
                url: "/test/getOk"
            })
            .then(resp => {
                console.log('结果', resp);
            })
            .catch(err => {
                console.log('失败',err);
            });

            // 直接访问mutations
            this.$store.commit('JIA', this.n)
        },
        dec() {
            // 先访问action, action再访问mutations
            this.$store.dispatch('jian', this.n)
        },
        incOdd() {
            
        },
        incWait() {
            setTimeout(() => {

            }, 500)
        }


    }
}
</script>

<style scoped>
    button {
        margin-left: 5px;
    }
</style>